<template>
  <div class="dashboard-container">
    <div ref="clockContainer" class="clock-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'calendarChart',
  data() {
    return {
      chart: null,
      updateInterval: null
    };
  },
  mounted() {
    this.initChart();
    this.startClock();
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
    if (this.updateInterval) {
      clearInterval(this.updateInterval);
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.clockContainer);

      const option = {
        backgroundColor: '#000',
        series: [
          // 小时指针
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 12,
            splitNumber: 12,
            axisLine: {
              lineStyle: {
                width: 6,
                color: [[1, 'rgba(255,255,255,0.3)']]
              }
            },
            pointer: {
              width: 4,
              length: '50%',
              itemStyle: {
                color: '#FFF'
              }
            },
            detail: {show: false}
          },
          // 分钟指针
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 60,
            // splitNumber: 60,
            clockwise: true,
            axisLine: {show: false},
            pointer: {
              width: 3,
              length: '70%',
              itemStyle: {
                color: '#FFF'
              }
            },
            detail: {show: false}
          },
          // 秒钟指针
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 60,
            animationEasingUpdate: 'bounceOut',
            clockwise: true,            // splitNumber: 60,
            axisLine: {show: false},
            pointer: {
              width: 2,
              length: '85%',
              itemStyle: {
                color: '#FF4500'
              }
            },
            detail: {show: false}
          }
        ]
      };

      this.chart.setOption(option);
    },
    startClock() {
      this.updateInterval = setInterval(() => {
        const now = new Date();
        const hours = now.getHours() % 12;
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();

        this.chart.setOption({
          series: [
            {data: [{value: hours}]},
            {data: [{value: minutes}]},
            {data: [{value: seconds}]}
          ]
        });
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
}

.clock-container {
  width: 100%;
  height: 600px;
}

@media (max-width: 768px) {
  .clock-container {
    width: 300px;
    height: 300px;
  }
}
</style>
